<template>
    <div class="demo">
        <h2>基础使用</h2>
        <p>基本使用只需要使用codeRain标签，并且支持一下自定义配置，组件基于其父元素的宽高进行设置大小</p>
        <div class="component-wrapper">
            <div class="component-wrapper-demo">
                <ClientOnly>
                    <mp3-visualization></mp3-visualization>
                </ClientOnly>
            </div>
            <div class="code-content" style="height: 0">
                <div class="code-content-height">
                    <pre><code class="vue">{{ codeStr }}</code></pre>
                </div>
            </div>
            <div class="lock-code" @click="showCode(0)" ref="EchartMapBase">
                <i :class="isShow[0] === false ? 'el-icon-arrow-down icon-down' : 'el-icon-arrow-up icon-down'"></i>
                <span class="lock-code-word">{{
                    isShow[0] === false ? "显示代码" : "隐藏代码"
                }}</span>
            </div>
        </div>

        <h2>Options</h2>
        <table style="width:100%">
            <tr>
                <th style="width: 10%;">参数</th>
                <th style="width: 40%;">参数说明</th>
                <th style="width: 10%;">类型</th>
                <th style="width: 30%;">可选值（取值说明）</th>
                <th style="width: 10%;">默认值</th>
            </tr>
            <tr>
                <td>colors</td>
                <td>代码随机获取的颜色</td>
                <td>Array</td>
                <td>数组：数组当中填写多个颜色值</td>
                <td>['#ee4863','#45b787','#fcc307','#835e1d']</td>
            </tr>
            <tr>
                <td>words</td>
                <td>随机出现的字符</td>
                <td>String</td>
                <td>字符串</td>
                <td>'Hello World!'</td>
            </tr>
            <tr>
                <td>drawInterval</td>
                <td>绘制下一个的速度，值越小绘制刷新速度越快</td>
                <td>Number</td>
                <td>数字</td>
                <td>40</td>
            </tr>
            <tr>
                <td>fontSize</td>
                <td>字体大小，获取整个组件的宽度，将会划分 宽/15 每一份为一列也就是一个字体大小</td>
                <td>Number</td>
                <td>数字</td>
                <td>15</td>
            </tr>
            <tr>
                <td>bgColor</td>
                <td>背景颜色，需要设置颜色透明度</td>
                <td>String</td>
                <td>需要使用rgba进行设置</td>
                <td>'rgba(240,240,240,0.1)'</td>
            </tr>
            <tr>
                <td>nextAppear</td>
                <td>当绘制到最底部时下一次重新绘制的几率，值越大几率越小</td>
                <td>Number</td>
                <td>0~1 不包含1</td>
                <td>0.95</td>
            </tr>

        </table>
    </div>
</template>
<script>
import mixin from "../mixin";
export default {
    name: "mp3VisualizationBase",
    mixins: [mixin],
    data() {
        return {
            codeStr: `<code-rain></code-rain>`
        }
    }
}
</script>
